<template>
  <div class="main">
    <div class="left">
      <ul class="ulb">
        <li v-for="(item, index) in data" :key="index">
          <span @click="sel(index)"> {{ item.title }}</span>
          <ul v-show="item.show">
            <li
              v-for="(item1, index1) in item.data"
              @click="play(index, index1)"
              :key="index1"
            >
              {{ item1.monitoring_name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="right" id="playWind"></div>
  </div>
</template>
<script>
// import { selectMonitoring } from "@/api/api/index";
export default {
  data() {
    return {
      x: "",
      y: "",
      data: "",
      decoder: null,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.decoder = new EZUIKit.EZUIPlayer({
      id: "playWind",
      autoplay: true,
      url: "ezopen://open.ys7.com/F61504721/13.hd.live",
      accessToken: localStorage.getItem("videoToken"),
      decoderPath: "/static/ezui",
      width: 1520,
      height: 826,
    });
  },
  destroyed() {
    this.onStop();
  },
  methods: {
    onStop() {
      this.decoder.stop();
    },
    play(index, index1) {
      this.onStop();
      this.decoder = new EZUIKit.EZUIPlayer({
        id: "playWind",
        autoplay: true,
        url: this.data[index].data[index1].monitoring_url,
        accessToken: localStorage.getItem("videoToken"),
        decoderPath: "/static/ezui",
        width: 1468,
        height: 826,
      });
    },
    // 获取数据
    getList() {
      this.$api
        .selectMonitoring({ user_id: localStorage.getItem("user_id") })
        .then((res) => {
          for (const key in res.data) {
            res.data[key].show = false;
          }

          this.data = res.data;
        })
        .catch(() => {});
    },
    // 切换子菜单显示状态
    sel(index) {
      this.data[index].show = !this.data[index].show;
    },
    // 相对于 浏览器
    getMousePos(event) {
      this.y = event.clientY - 182;
      this.x = event.clientX;

      this.$forceUpdate();
    },
  },
};
</script>
<style scoped>
.main {
  padding: 24px;
}

ul {
  list-style: none;
}

.ulb {
}

.ulb > li {
  background: url("../../assets/img/title/md.webp") no-repeat;
  width: 332px;
  line-height: 60px;
  text-align: center;
  color: #ffffff;
}

.left {
  display: inline-block;
}

.right {
  width: 1520px;
  height: 864px;
  background: #4c4b4b;
  border: 2px solid;
  display: inline-block;
  float: right;
  border-image: linear-gradient(-90deg, #299bff, #1753ff) 10 10;
}

.colorF {
  text-align: center;
  color: #ffffff;
}
</style>
